<template>
  <div class="market_pointshop_goods_detail">
    <!-- <div style="margin:30px 0">
        <Row type="flex" class="detail-show">
            <Col span="24" class="first">上架商品详情</Col>
            <Col span="24" class="col-item-spacial common-style">
              <span>所属模块：HOT专区</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>优惠券名称：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>类型：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span v-if="this.$route.query.type === '1'">面额：</span>
              <span v-if="this.$route.query.type === '2'">折扣：</span>
              <span></span>
            </Col>

            <Col span="12" class="col-item common-style" v-if="this.$route.query.type === '2'">
              <span>最高折扣金额：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>有效期：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span v-if="this.$route.query.type === '2'">时长：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>开始时间：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>结束时间：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>可用渠道：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>适用产品：</span>
              <span></span>
            </Col>
            <Col span="24" class="col-item-spacial common-style">
              <span>状态：</span>
              <span></span>
            </Col>
          </Row>
          <Row type="flex" class="detail-show">
            <Col span="12" class="col-item common-style">
              <span>创建时间：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>编辑时间：</span>
              <span></span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>创建人：</span>
              <span>dd</span>
            </Col>
            <Col span="12" class="col-item common-style">
              <span>编辑人：</span>
              <span>dd</span>
            </Col>
            <Col span="24" class="col-item-spacial remake">
              <p style="width:125px;padding-left:33px">优惠券说明：</p>
              <p style="flex: 1">从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态并且提供从界面设计到前端开发的全链路生态前端开发的全链路生态，可以大大提升设计和开发的效率。</p>
            </Col>
            <Col span="24" class="col-item-spacial remake">
              <p style="width:125px;padding-left:33px">优惠券图片：</p>
              <p><img src="http://www.placehold.it/120x160/ " alt=""></p>
            </Col>
          </Row>
    </div>-->
    <div>
      <div class="ivu-table-wrapper">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-header">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <thead>
                <tr>
                  <th colspan="2">
                    <div class="ivu-table-cell">
                      <span class>上架商品详情</span>
                    </div>
                  </th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="ivu-table-body">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <tbody class="ivu-table-tbody">
                <tr class="ivu-table-row">
                  <td colspan="2">
                    <div class="ivu-table-cell">
                      <span>所属模块：{{ ['hot专区', '积分兑好礼', '等级进阶礼'][detail.moduleType] }}</span>
                    </div>
                  </td>
                </tr>
                <tr class="ivu-table-row">
                  <td colspan="2" class>
                    <div class="ivu-table-cell">
                      <!-- <span>Jim Green</span> -->
                      <div class="ivu-table ivu-table-default">
                        <table
                          class="table-border-none"
                          cellspacing="0"
                          cellpadding="0"
                          border="0"
                          style="width: 100%;"
                        >
                          <tr class="ivu-table-row">
                            <td>优惠券名称</td>
                            <td>类型</td>
                            <td>有效期</td>
                            <td>使用渠道</td>
                            <td>最低使用金额(元）</td>
                          </tr>
                          <tr class="ivu-table-row">
                            <td>{{ coupon.couponName }}</td>
                            <td>{{ ['代金券', '折扣券', '赠币券', '赠送积分', '手动录入商品'][coupon.couponType] }}</td>
                            <td>{{ coupon.expirationLimit }}</td>
                            <td>
                              {{
                                (row => {
                                  if (row.channel && row.channel.length) {
                                    return row.channel
                                      .map(item => {
                                        return channelFilter[item]
                                      })
                                      .join(',')
                                  } else {
                                    return ''
                                  }
                                })(coupon, channelFilter)
                              }}
                            </td>
                            <td>{{ coupon.accumAmount }}</td>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </td>
                </tr>
                <!---->
                <tr class="ivu-table-row">
                  <td class>
                    <div class="ivu-table-cell">
                      <span>商品名称：{{ detail.refName }}</span>
                    </div>
                  </td>
                  <td class>
                    <div class="ivu-table-cell">
                      <span>兑换价(积分)：{{ detail.price }}</span>
                    </div>
                  </td>
                </tr>

                <tr class="ivu-table-row">
                  <td class>
                    <div class="ivu-table-cell">
                      <span>兑换限制：{{ ['无限制', '限制一次'][detail.buyLimit] }}</span>
                    </div>
                  </td>
                  <td class>
                    <div class="ivu-table-cell">
                      <span>等级兑换：{{ member }}</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <div class="ivu-table-cell">
                      <span>活动状态：{{ ['已下架', '已上架'][detail.status] }}</span>
                    </div>
                  </td>
                </tr>

                <tr class="ivu-table-row">
                  <td class>
                    <div class="ivu-table-cell">
                      <span>创建时间：{{ detail.createTime }}</span>
                    </div>
                  </td>
                  <td class>
                    <div class="ivu-table-cell">
                      <span>编辑时间：{{ detail.updateTime }}</span>
                    </div>
                  </td>
                </tr>

                <tr class="ivu-table-row">
                  <td class>
                    <div class="ivu-table-cell">
                      <span>创建人：{{ detail.creatorName }}</span>
                    </div>
                  </td>
                  <td class>
                    <div class="ivu-table-cell">
                      <span>编辑人：{{ detail.operatorName }}</span>
                    </div>
                  </td>
                </tr>

                <tr>
                  <td colspan="2">
                    <div class="ivu-table-cell ivu-table-cell-img">
                      <span>温馨提示：</span>
                      <span v-html="detail.note"></span>
                    </div>
                  </td>
                </tr>

                <tr v-show="detail.moduleType === 0">
                  <td colspan="2">
                    <div style="display:flex;" class="ivu-table-cell ivu-table-cell-img">
                      <span>优惠券图片：</span>
                      <p>
                        <img class="imageUrl" :src="detail.imageUrl" alt />
                      </p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// pointUpdate couponList
import { getShopDetail, couponDetail } from '@/api/market/pointshop'
import { getMemberLevelList } from '@/api/member/index.js'
import enumsMixin from '@/view/market/enums.js'
export default {
  name: 'market_pointshop_goods_detail',
  mixins: [enumsMixin],
  data () {
    return {
      detail: {},
      coupon: {},
      memberLevel: [{ memberLevelName: '无限制', memberLevel: -1 }]
    }
  },
  computed: {
    member () {
      let level = ''
      this.memberLevel.forEach(item => {
        if (String(item.memberLevel) === String(this.detail.memberLevel)) {
          level = item['memberLevel']
        }
      })
      if (Number(level) === -1) {
        level = '无限制'
      } else {
        level = `V${level}及以上`
      }
      // if(arr.length) {

      // }
      return level
    },
    channelFilter () {
      let obj = {}
      this.channelList.forEach(item => {
        Reflect.set(obj, item.value, item.label)
      })
      return obj
    }
  },
  created () {
    this.getShopDetail()
    this.getMemberLevelList()
  },
  methods: {
    async getShopDetail () {
      const res = await getShopDetail({ mallLayoutId: this.$route.params.id })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      if (res.data && res.data.data) {
        this.detail = res.data.data
        this.couponDetail(res.data.data.refId)
        // this.tableData.push(obj)
      }

      // console.log(obj)
    },
    // 优惠券详情
    async couponDetail (refId) {
      const res = await couponDetail({ refId })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      if (res.data && res.data.data) {
        this.coupon = res.data.data
      }
    },
    async getMemberLevelList () {
      const res = await getMemberLevelList({ merchantId: this.$store.state.user.merchantId })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      if (res.data && res.data.data) {
        this.memberLevel.push(...res.data.data)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.market_pointshop_goods_detail {
  // width: 960px;
  margin: 0 auto;
  padding: 40px 80px;

  // margin-top: 100px;
  .ivu-table-border .table-border-none th,
  .ivu-table-border .table-border-none td {
    border-right: none;
  }
  .ivu-table .table-border-none th,
  .ivu-table .table-border-none td {
    border-bottom: none;
  }
  .imageUrl {
    max-width: 300px;
    max-height: 400px;
  }
  .ivu-table-cell-img {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
</style>
